<template>
    <div>
        <h1>公告栏向上滚动</h1>
        <div class="box">
            <transition name="slide">
                <p class="text" :key="text.id">{{text.val}}</p>
            </transition>
        </div>
    </div>
</template>

<script>
export default {
    name: 'scroll',
    data () {
        return {
            textArr: [
                '1.这是一条公告',
                '2.这是一条公告too',
                '3.这是一条公告tootoo'
            ],
            number: 0
        }
    },
    computed: {
        text () {
            return {
                id: this.number,
                val: this.textArr[this.number]
            }
        }
    },
    mounted () {
        this.startMove()
    },
    methods: {
        startMove () {
            // eslint-disable-next-line
            let timer = setTimeout(() => {
                if (this.number === 2) {
                    this.number = 0;
                } else {
                    this.number += 1;
                }
                this.startMove();
            }, 1000); // 滚动不需要停顿则将1000改成动画持续时间
        }
    }
}
</script>

<style scoped>
h1 {
    padding: 20px 0
}
.box{
    width: 100%;
    height: 40px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: center;
}
.text {
    width: 100%;
    position: absolute;
    bottom: 0;
}
.slide-enter-active, .slide-leave-active {
    transition: all 0.5s linear;
}
.slide-enter{
    transform: translateY(20px) scale(1);
    opacity: 1;
}
.slide-leave-to {
    transform: translateY(-20px) scale(0.8);
    opacity: 0;
}
</style>
